<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试评论</title>
<!-- CSS -->
<link rel="stylesheet" href="{{asset('/res/css/bootstrap.css')}}"> <!-- load bootstrap via cdn -->

<style>
body { padding-top:30px; }
form { padding-bottom:20px; }
.comment { padding-bottom:20px; }
</style>
<!-- JS -->
<script src="{{asset('/res/js/jquery-1.11.1.min.js')}}"></script>
<script src="{{asset('/assets/js/angularJS.js')}}"></script> <!-- load angular -->
<!-- ANGULAR -->
<!-- all angular resources will be loaded from the /public folder -->
<script type="text/javascript">

angular.module('commentService', [])
    .factory('Comment', function($http) {
        return {
            // get all the comments
            get : function() {
                return $http.get('api/comments');
            },
            // save a comment (pass in comment data)
            save : function(commentData) {
                return $http({
                    method: 'POST',
                    url: 'api/comments',
                    headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                    data: $.param(commentData)
                });
            },
            // destroy a comment
            destroy : function(id) {
                return $http.delete('api/comments/' + id);
            }
        }

    });
angular.module('mainCtrl', [])
    // 在控制器中诸如Comment服务
    .controller('mainController', function($scope, $http, Comment) {
        // 持有新评论所有表单数据的对象
        $scope.commentData = {};

        // 调用显示加载图标的变量
        $scope.loading = true;

        // 先获取所有的评论，然后绑定它们到$scope.comments对象         // 使用服务中定义的函数
        // GET ALL COMMENTS ====================================================
        Comment.get()
            .success(function(data) {
                $scope.comments = data;
                $scope.loading = false;
            });
        // 处理提交表单的函数
        // SAVE A COMMENT ======================================================
        $scope.submitComment = function() {
            $scope.loading = true;

            // 保存评论。在表单间传递评论
            // 使用在服务中创建的函数
            Comment.save($scope.commentData)
                .success(function(data) {
                    // 如果成功，我们需要刷新评论列表
                    Comment.get()
                        .success(function(getData) {
                            $scope.comments = getData;
                            $scope.loading = false;
                        });

                })
                .error(function(data) {
                    console.log(data);
                });
        };
        // 处理删除评论的函数
        // DELETE A COMMENT ====================================================
        $scope.deleteComment = function(id) {
            $scope.loading = true;

            // 使用在服务中创建的函数
            Comment.destroy(id)
                .success(function(data) {

                    // 如果成功，我们需要刷新评论列表
                    Comment.get()
                        .success(function(getData) {
                            $scope.comments = getData;
                            $scope.loading = false;
                        });

                });
        };

    });
var commentApp = angular.module('commentApp', ['mainCtrl', 'commentService']);
</script>

</head>
<body class="container" ng-app="commentApp" ng-controller="mainController">
<div class="col-md-8 col-md-offset-2">
	<div class="page-header">
		<h2>ANGULARJS单页评论测试</h2>
		<h4>评论系统</h4>
	</div>
	<form ng-submit="submitComment()">
		<div class="form-group">
			<input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-lg" name="comment" ng-model="commentData.content" placeholder="Say what you have to say">
		</div>
		<div class="form-group text-right">
			<button type="submit" class="btn btn-primary btn-lg">提交</button>
		</div>
	</form>
	<pre>
	@{{ commentData }}
	</pre>
	<p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
	<div class="comment" ng-hide="loading" ng-repeat="comment in comments">
		<h3>Comment #@{{ comment.id }} <small>by @{{ comment.author }}</h3>
		<p>@{{ comment.content }}</p>
		<p><a href="#" ng-click="deleteComment(comment.id)" class="text-muted">Delete</a></p>
	</div>
</div>
</body>
</html>
